<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="content">
      <div class="left common">
        <h3>知识区</h3>
        <Knowledge></Knowledge>
      </div>
      <div class="right common">
        <h3>效果区</h3>
        <Effect></Effect>
        <h3>函数区（常用）</h3>
        <FunctionArea></FunctionArea>
      </div>
    </div>
  </div>
</template>

<script>
import Knowledge from './knowledge'
import Effect from './effect'
import FunctionArea from './function'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Less 预编译'
    }
  },
  components: {
    Knowledge,
    Effect,
    FunctionArea
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h1, h2 {
  color: rgb(250, 167, 0);
}
.hello{
  .content{
    display: flex;
    height: 640px;
    .common{
      padding: 10px;
      h3{
        margin-top: 6px;
        background: linear-gradient(90deg, rgb(255, 245, 224) 0%, rgb(255, 200, 91) 50%, rgb(255, 245, 224) 100%);
        color: white;
        padding: 4px;
      }
    }
    .left{
      flex: 1;
      background: rgb(255, 245, 224);
      border: 1px solid rgb(255, 222, 156);
      border-right: 2px rgb(240, 187, 81) dashed;
      border-radius: 20px 0 0 20px;
    }
    .right{
      flex: 1;
      background: rgb(255, 245, 224);
      border: 1px solid rgb(255, 222, 156);
      border-left: 2px rgb(240, 187, 81) dashed;
      border-radius: 0 20px 20px 0;
    }
  }
}
</style>
